<template>
  <div>
    <el-container>
      <el-header class="header">
        <el-form :inline="true" ref="form" label-width="80px">
          <el-form-item>
            <el-button type="primary" @click="addParent">添加</el-button>
          </el-form-item>
        </el-form>
      </el-header>
      <el-main>
        <el-tree :data="typeData" node-key="id" :props="defaultProps" >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span><i :class="data.icon"></i>&nbsp;{{ node.label }}</span>
            <span>
              <el-button
                type="success"
                size="mini"
                icon="el-icon-plus"
                @click="() => append(data)"
                >添加</el-button
              >
              <el-button type="primary" size="mini" icon="el-icon-edit" @click="edit(node,data)"
                >编辑</el-button
              >
              <el-button
                type="danger"
                size="mini"
                icon="el-icon-delete"
                @click="() => remove(data)"
                >删除</el-button
              >
            </span>
          </span>
        </el-tree>
      </el-main>
      <el-dialog :title="title" :visible.sync="dialogFormVisible" width="500px">
        <el-form :model="type">
          <el-form-item
            label="父级："
            label-width="120px"
            style="text-align: left"
          >
            <el-tag type="success">{{ type.parentName }}</el-tag>
          </el-form-item>
          <el-form-item label="分类名称：" label-width="120px">
            <el-input v-model="type.name" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </div>
      </el-dialog>
    </el-container>
  </div>
</template>

<script>
import { getTypeList, addType, deleteType,updateType} from "@/api/type.js";
export default {
  data() {
    return {
      dialogFormVisible: false,
      type: {},
      typeData: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      title: "",
    };
  },
  mounted() {
    this.loadTypes();
  }, 
  methods: {
    loadTypes() {
      getTypeList().then((res) => {
        if (res.data.code === "0000") {
          this.typeData = res.data.data;
          console.log(res.data.data)
          this.setTree(this.typeData);
        }
      });
    },
    setTree(List) {
      List.forEach((element) => {
        element.label = element.name;
        if (element.children != null) {
          this.setTree(element.children);
        }
      });
    },
    append(data) {
      this.type={}
      this.title = "添加分类";
      this.dialogFormVisible = true;
      this.type.parentName = data.label;
      this.type.parentId = data.id;
      // console.log(node.parent);
      // const newChild = { id: id++, label: 'testtest', children: [] };
      // if (!data.children) {
      //   this.$set(data, 'children', []);
      // }
      // data.children.push(newChild);
    },
    edit(node,data){
      this.title="编辑分类",
      this.dialogFormVisible=true
      this.type=data
      if(node.parent.label!=undefined){
        this.type.parentName=node.parent.label
      }else{
        this.type.parentName="无"
      }
      
    },
    remove(data) {
      this.$confirm("此分类将被永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteType(data.id).then((res) => {
            if (res.data.code == "0000") {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.loadTypes()
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
      // const parent = node.parent;
      // const children = parent.data.children || parent.data;
      // const index = children.findIndex((d) => d.id === data.id);
      // children.splice(index, 1);
    },
    save() {
      if (this.title == "添加分类"||this.title=="添加父类") {
        addType(this.type).then((res) => {
          if (res.data.code == "0000") {
            this.$message.success("添加成功");
            this.loadTypes()
            this.dialogFormVisible=false
          }
        });
      }else if(this.title=="编辑分类"){
        updateType(this.type).then(res=>{
          if(res.data.code=="0000"){
            this.$message.success("更新成功")
            this.loadTypes()
            this.dialogFormVisible=false
          }
        })
      }
      
    },
    addParent(){
      this.type={}
      this.title="添加父类"
      this.dialogFormVisible=true
      this.type.parentId=0
      this.type.parentName="无"
    }
  },
};
</script>

<style>
.header {
  text-align: left;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}

.el-tree-node {
  margin-top: 15px;
  font-size: 30px;
}
</style>